// An highlighted block
<template>
	<view class="content">
		<h1 class="title">注册</h1>
		<view class="form">
			<uni-forms  ref="form" :modelValue="formData" >
				<uni-forms-item name="iphone">
					<input class="input" type="text" value="" v-model="formData.userName" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<input class="input" type="password" value="" v-model="formData.password" placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
				
					
			<view class="loginBtn" @click="submit">
				<text class="btnValue">注册</text>
			</view>
		</view>
	</view>
</template>



<script>
	export default {
		data() {
			return {
				formData: {
					userName: '',
					password:'',
				},
				 
				 
			}
		},
		onLoad() {

		},
		methods: {
			
			
			submit() {
			           this.$refs.form.validate().then(res=>{
			               console.log('表单数据信息：', res);
										this.register(res)
			           }).catch(err =>{
			               console.log('表单错误信息：', err);
			           })
			       },
			
			async register(e){
				
					await uni.request({
						url:"http://hkg.ggdogweb.top:8085/blogapi/user/register",
						method:'POST',
						data:{
							userName:this.formData.userName,
							userPsd:this.formData.password
						},
						success: (res) => {
							console.log(res.data)
							if(res.data.code===0){
								uni.showToast({
									title:"注册成功！"
								})
								
								   // 这里可以使用 uni.navigateBack 返回到包含 my 组件的页面
								 uni.navigateBack()
								
							}else{
								uni.showToast({
									title:res.data.message,
									icon:'error'
								})
							}
							
						},
						fail: (err) => {
							uni.showModal({
								title:"登录失败！"+err
							})
							console.log("登录失败！"+err)
						}
					})
				
			},
						
		}
	}
</script>



<style>
	.content {
		width: 100vw;
		height: 100vh;
	}
	.title{
		margin-left: 100rpx;
		margin-top: 180rpx;
		color: #333333;
	}
	.form{
		padding: 0 100upx;
		margin-top: 40px;
	}
	.inputWrapper{
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 20px;
		border:0.5px solid #a3a3a3;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
	}
	.inputWrapper .input{
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 15px;
	}
	.loginBtn{
		width: 100%;
		height: 80upx;
		background: #6290f3;
		border-radius: 50upx;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.loginBtn .btnValue{
		color: white;
	}
	.forgotBtn{
		text-align: center;
		color: #8d8d8d;
		font-size: 15px;
		margin-top: 20px;
	}
	.input {
		flex: 1;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		padding: 10px;
	}
</style>
